﻿<script src="~/Scripts/jquery-easyui-extensions/menu/jeasyui.extensions.menu.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.rowContext.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false">
    <table id="dg1"></table>
</div>

<script>
    $(function () {
        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'AreaName', title: '地区', width: 150, rowspan: 2 });
            c1.push({ title: '性别', colspan: 2 });

            var c2 = [];
            c2.push({
                field: 'Sex1', title: '男', width: 90,
                formatter: function (val) {
                    return val + "（男0）";
                }
            });
            c2.push({
                field: 'Sex2', title: '女', width: 90,
                formatter: function (val) {
                    return val + "（女1）";
                }
            });

            result.push(c1);
            result.push(c2);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 }
            ];

            result.push([{ title: "测试", colspan: 2 }]);
            result.push(normal00000);

            return result;
        };

        var options = {
            title: "已开启数据行右键功能",
            idField: "ID",
            rownumbers: false,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: [{
                iconCls: 'icon-edit',
                text: "按钮1",
                handler: function () {
                    alert("按钮1");
                }
            }],
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "post",
            url: "/Datagrid/GetDataGridJson",
            pagination: true,
            enableRowContextMenu: true,
            selectOnRowContextMenu: true,
            refreshMenu: false,
            pagingMenu: { submenu: true },
            rowContextMenu: [
                {
                    text: "菜单按钮1", iconCls: "icon-ok", handler: function (e, item, menu, grid, rowIndex, row) {
                        alert("触发菜单1,数据行索引["+ rowIndex +"],数据:["+ row.AreaName +"]");
                    }
                }
            ]
        };

        $("#dg1").datagrid(options);
    });
</script>